import React from 'react';
import { List, Toast } from 'antd-mobile'
import { SetOutline, RightOutline, AddOutline, MessageOutline, StarOutline, UnlockOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import '../styles/profile.scss'
import NavHeader from '../components/NavHeader'
import TabBarFooter from '../components/TabBarFooter'

// 用户信息接口
interface Patient {
  id: string;
  name: string;
  age: number;
  gender: '男' | '女';
  relation: string;
  isDefault?: boolean;
  idCard: string;
}

const ProfilePage: React.FC = () => {
  const navigate = useNavigate()

  // 模拟患者数据
  const patients: Patient[] = [
    {
      id: '1',
      name: '张三',
      age: 35,
      gender: '男',
      relation: '本人',
      isDefault: true,
      idCard: '123456789012345678'
    },
    {
      id: '2',
      name: '',
      age: 65,
      gender: '男',
      relation: '父母',
      idCard: '110101195*****5678'
    }
  ]

  // 处理设置按钮点击
  const handleSettings = () => {
    Toast.show('设置功能开发中...');
    return;
  }

  // 处理患者点击
  const handlePatientClick = (patientId: string) => {
    Toast.show('编辑就诊人信息功能开发中...');
    console.log(patientId);
    return;
  }

  // 处理添加就诊人
  const handleAddPatient = () => {
    navigate('/add-patient')
  }

  // 处理更多服务项目点击
  const handleServiceClick = (service: string) => {
    Toast.show(`${service}功能开发中...`);
    return;
  }

  return (
    <div className="profile-page">
      <NavHeader
        title='个人中心'
        showBack={false}
        right={<SetOutline fontSize={20} onClick={handleSettings} />}
      />

      {/* 用户列表   */}
      <div className="patients-section">
        {patients.map(patient => (
          <div
            key={patient.id}
            className='patient-item'
            onClick={() => handlePatientClick(patient.id)}
          >
            <div className="patient-info">
              <div className="name-row">
                <span className="name">{patient.name}</span>
                <span className="relation">({patient.relation})</span>
                {patient.isDefault && <span className="default-tag">默认</span>}
              </div>
              <div className="details-row">
                {patient.age}岁 {patient.gender} 身份证号：{patient.idCard}
              </div>
            </div>
            <RightOutline className="arrow-icon" />
          </div>  
        ))}

        <div className="add-patient-btn" onClick={handleAddPatient}>
          <AddOutline className='add-icon' />
          <span>添加就诊人</span>
        </div>
      </div>

      {/* 更多服务 */}
      <div className="services-section">
        <div className="section-title">更多服务</div>
        <List className='service-list'>
          <List.Item
            prefix={<MessageOutline color="#1677ff" />}
            extra={<RightOutline />}
            onClick={() => handleServiceClick('客服中心')}
          >客服中心</List.Item>
          <List.Item
            prefix={<StarOutline color="#ff9500" />}
            extra={<RightOutline />}
            onClick={() => handleServiceClick('意见反馈')}
          >意见反馈</List.Item>  
          <List.Item
            prefix={<UnlockOutline color="#52c41a" />}
            extra={<RightOutline />}
            onClick={() => handleServiceClick('隐私政策')}
          >隐私政策</List.Item>
        </List>
      </div>

      {/* 使用公共底部标签栏组件 */}
      <TabBarFooter activeKey='profile' />
    </div>
  )
}

export default ProfilePage;